<template>
  <div class="views-wechat-manage" style="padding:30px;">

    <div class="module-filter">
      <span class="item-filter">
        公众号名称：
        <el-input
          placeholder="请输入公众号名称"
          v-model="search.sn"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        公众号类型：
        <el-select v-model="search.bookStatus" placeholder="请选择公众号类型">
          <el-option
            v-for="item in dtypeAttr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </span>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <div class="module-action">
      <el-button icon="el-icon-document-add" type="primary" @click="handleAddEdit('add')">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div class="module-left">
            <img src="@/assets/code.png"/>
              </div>
            <div class="module-content">
              <el-form-item label="AppID">
                <span>{{ props.row.AppID }}</span>
              </el-form-item>
              <el-form-item label="主体名称">
                <span>{{ props.row.oname }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.date }}</span>
              </el-form-item>

              <div class="module-wechat-button">
                <el-button size="mini" type="primary" @click="handleToMenu(props.row)" plain>微信菜单</el-button>
                <el-button size="mini" type="primary" @click="handleToUser(props.row)" plain>用户管理</el-button>
                <el-button size="mini" type="primary" @click="handleSearch" plain>用户消息</el-button>
                <el-button size="mini" type="primary" @click="handleSearch" plain>自动回复</el-button>
              </div>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="公众号名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="公众号类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="otype"
        label="认证类型">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增修改弹出框 -->
    <!-- 新增修改弹出框 -->
    <el-dialog title="新增" :visible.sync="addEditVisible" width="30%">
      <VisibleAddEdit @closeVisible="addEditVisible=false"></VisibleAddEdit>
    </el-dialog>
  </div>
</template>

<script>
  import { getList } from '@/api/dispatching'
  import VisibleAddEdit from './components/index-add-edit.vue'
  export default{
    components:{
      VisibleAddEdit
    },
    data(){
      return{
        curStatus:-1,
        dtypeAttr:[
          {
            value:'',
            label:'全部'
          },{
            value:'3900',
            label:'服务号'
          },{
            value:'3901',
            label:'订阅号'
          },
        ],
        imgYuyue:[],
        imgFinish:[],
        search:{
          sn:'',
          selfNumber:'',
          carNo:'',
          bookStatus:'',
        },
        tableData:[],
        total:0,
        page:1,
        rows:10,
        addEditForm:{},
        addEditVisible:false,
      }
    },
    created(){

      this.tableData=[
        {
          id:111,
          img:'../../assets/code.png',
          name:'汽玻派派',
          type:'服务号',
          otype:'微信认证',
          AppID:'wx6bbabe2a208f5463',
          oname:'广州辅坦顺信息科技有限公司',
          date:'2019-10-10 15:00:87'
        },{
          id:222,
          img:'@/assets/code.png',
          name:'大粤汽车玻璃',
          type:'服务号',
          otype:'未认证',
          AppID:'wx6bbabe2a208f5463',
          oname:'广州辅坦顺信息科技有限公司',
          date:'2019-10-10 15:00:87'
        },
      ]
//      this.getData();
    },
    methods:{
      getData(){
        const postData={
          page:this.page,
          rows:this.rows,
          'form.sn':this.search.sn,
          'form.selfNumber':this.search.selfNumber,
          'form.carNo':this.search.carNo,
          'form.bookStatus':this.search.bookStatus,
        };
        getList(postData).then(res => {
            this.tableData=res.rows;
            this.total=res.total;
          }).catch(error => {
              console.log(res,111)
          })
      },

      handleSearch(){
        this.getData();
      },
      handleSelected(val){
        this.curStatus=val.bookStatusDesc;
        this.imgYuyue=[];
        this.imgFinish=[];
        for(var i=0;i<val.uploads.length;i++){
          if(val.uploads[i].fileType==0){
            this.imgYuyue.push(val.uploads[i])
          }else{
            this.imgFinish.push(val.uploads[i])
          }
        }
        console.log(val,123)
      },
      handleAddEdit(type){
        this.addEditVisible=true;
      },

      /**公众号管理操作**/
      handleToMenu(item){

        this.$router.push({path:'/wechatManage/menu',query:{id:item.id}})
        console.log(item)
      },
      handleToUser(item){

        this.$router.push({path:'/wechatManage/user',query:{id:item.id}})
        console.log(item)
      },

    }
  }
</script>
<style>
  .module-filter{
    margin:0 0 20px;
    padding:24px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
  }
  .module-filter .item-filter{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    padding-right: 12px;
  }
  .module-filter .item-filter .el-input{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
  }
  .module-filter .item-filter .el-input__inner{
    padding: 0 10px;
  }
  .module-filter .item-filter .el-select .el-input{
    width: 170px;
  }
  .module-action{
    padding:0 0 18px;
  }
  .module-action .el-button{
    padding:10px;
    font-size: 13px;
  }
  .module-action .el-button i{
    font-size: 16px;
  }
  .el-table__row{
    cursor: pointer;
  }
  .el-table__body tr.current-row>td{
    background: #b3d8ff;
    /*color: #fff;*/
  }
  .views-wechat-manage .module-left{
    display: inline-block;
    vertical-align: top;
    width:180px;
  }
  .views-wechat-manage .module-content{
    display: inline-block;
    vertical-align: top;
    width: 74%;
  }
  .views-wechat-manage .module-content .el-form-item{
    display: block;
    margin: 0;
  }
  .views-wechat-manage .el-table__expanded-cell{
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
  }
  .views-wechat-manage .module-wechat-button{
    margin:14px 0 0;
    padding:20px 0 0;
    border-top:1px solid #eee;
  }
  .views-wechat-manage .is-leaf{
    background: #f5f7fa;
  }
  .views-wechat-manage .el-table__row td{
    background: #fafafa;
  }
</style>
